<template>
  <div class="main">
    <van-nav-bar title="更新患者" left-text="返回" left-arrow   @click-left="onClickLeft">
    </van-nav-bar>
    <van-cell style="margin-top:10px;height:60px;background-color:gainsboro;font-size: 22px;"
              class="text-overstriking flex"><span style="margin-left:10px;">就诊信息</span></van-cell>
      <van-field label="就趁姓名" value="王天辰"  />
      <van-field label="证件类型" value="超级无敌"  />
      <van-field label="证件号码" value="外科"  />
    <van-field name="radio" label="性别">
      <template #input>
        <van-radio-group v-model="radio" direction="horizontal">
          <van-radio name="1">男</van-radio>
          <van-radio name="2">女</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field
      readonly
      clickable
      name="datetimePicker"
      :value="value"
      label="时间选择"
      placeholder="点击选择时间"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        type="date"
        @confirm="onConfirm"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showPicker = false"
      />
    </van-popup>
      <van-field
        v-model="tel"
        type="tel"
        placeholder="手机号"
        label="手机号"
      />
    <van-field
      readonly
      clickable
      name="area"
      :value="city"
      label="当前住址"
      placeholder="点击选择省市区"
      @click="showArea = true"
    />
    <van-popup v-model="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="clickCity"
        @cancel="showArea = false"
      />
    </van-popup>
    <van-field v-model="text" label="详细地址" placeholder="请输入地址" />
    <van-cell style="margin-top:10px;height:60px;background-color:gainsboro;font-size: 22px;"
              class="text-overstriking flex"><span style="margin-left:10px;">建档信息</span></van-cell>
    <van-field name="radio" label="婚姻状态">
      <template #input>
        <van-radio-group v-model="radio1" direction="horizontal">
          <van-radio name="1">已婚</van-radio>
          <van-radio name="2">未婚</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field name="radio" label="专程就医">
      <template #input>
        <van-radio-group v-model="radio2" direction="horizontal">
          <van-radio name="1">是</van-radio>
          <van-radio name="2">否</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-cell style="margin-top:10px;height:60px;background-color:gainsboro;font-size: 22px;"
              class="text-overstriking flex"><span style="margin-left:10px;">联系人信息</span></van-cell>
    <van-field label="联系人信息" value="王天辰" placeholder="请填写联系人信息"  />
    <van-field label="证件类型"  />
    <van-field label="联系人证件号码"  placeholder="请填写证件号码" />
    <van-field label="联系人手机" type="tel" placeholder="请填写手机号"  />
    <div style="text-align: center"><van-button type="primary">添加就诊人</van-button></div>
  </div>
</template>

<script>
import city from '@/utils/dict.js'
export default {
  name: 'UpdatePatient',
  components: {},
  props: [],
  data () {
    return {
      tel: '',
      radio: '1',
      radio1: '1',
      radio2: '1',
      value: '',
      showPicker: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2050, 10, 1),
      areaList: city.areaList,
      showArea: false,
      city: ''
    }
  },
  computed: {},
  created () {
  },
  mounted () {
  },
  watch: {},
  methods: {
    onConfirm (date) {
      this.value = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
      this.showPicker = false
    },
    clickCity (city) {
      this.city = city
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/')
      this.showArea = false
    },
    onClickLeft () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang='less'>
.align-left {
  text-align: left;
}

</style>
